<template>
    <div>
        <div class="nav-wrap">
            <div  @click="linkTo('/')"  class="logo" :style="{backgroundImage: 'url(' +configObj.logo+ ')'}"></div>
            <div class="right-area" v-if="name">
                <div class="r-block logout" @click="loginOut()"><span class="fa fa-sign-out">退出登录</span></div>
                <div class="r-block separator"><span>|</span></div>
                <div class="r-block nikname">你好，{{name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data () {
        return {
            configObj:'',
            menuShow:false,
            name:''
        }
    },
    created(){
        let arr = location.hostname.split('.');
let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName]
    },
    mounted(){
        this.name = common.getCookie('nickname')
    },
    methods:{
        linkTo(link){
           this.$router.push(link)
        },
        handleLink() {
            const userType = common.getCookie('userType')
            if (userType == 'company') {
                this.linkTo('/ccOrderHand')
            } else if (userType == 'channel') {
                this.linkTo('/channelOrderHand')
            } else {
                this.linkTo('/bankBankOrderHand')
            }
        },
        loginOut(){
             common.setCookie('sessionId','')
             common.setCookie('nickname','')
             this.$nextTick(() => {
                this.$router.replace('/login')
             })
        },
        handleCommand(command){
            if(command == '1'){
                let url = CONSTANT.URL.ADMIN.LOGOUT,
                param={};
                common.requestAjax(url,param,(res)=>{
                })
                this.$router.push("/loginPage");
            }else{
                this.$router.push("/rechargePassword");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
    height: 40px;
    background-color: #F5F5F5;
    font-size: 14px;
    line-height: 40px;
    overflow: hidden;
    .tip{
        padding: 0 1.46% 0 .52%;
    }
    .header-select{
        position: relative;
        color: #EE7723;
        padding-right: .48%;
        &:after{
            content: '';
            position: absolute;
            width: 1px;
            height: 14px;
            background-color: #D1D1D1;
            right: 0;
            top:14px;
        }
    }
    .my-home {
        color: #EE7723;
        cursor: pointer;
    }
    .col-sufix {
        margin: 0 3px 0 3px;
        color: #EE7723;
    }
    .login1{
        color: #EE7723;
        cursor: pointer;
    }
    .login{
        &.name{
            color: #111111;
        }
        .arrow{
            width: 9px;
            height: 7px;
            margin-top: 16px;
            background: url(../../images/arrow1.png) no-repeat;
            background-size: 100%;
            margin-left: 7px;
            transform:rotate(0deg);
            -ms-transform:rotate(0deg); /* Internet Explorer */
            -moz-transform:rotate(0deg); /* Firefox */
            -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
            -o-transform:rotate(0deg); /* Opera */
            transition: transform 0.5s;
            -moz-transition: transform 0.5s; /* Firefox 4 */
            -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
            -o-transition: transform 0.5s; /* Opera */
        }
        &:hover {
            .arrow {
                transform:rotate(-180deg);
                -ms-transform:rotate(-180deg); /* Internet Explorer */
                -moz-transform:rotate(-180deg); /* Firefox */
                -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
                -o-transform:rotate(180deg); /* Opera */
                transition: transform 0.2s;
                -moz-transition: transform 0.2s; /* Firefox 4 */
                -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
                -o-transition: transform 0.2s; /* Opera */
            }
        }
        .arrow-transform {
            transform:rotate(-180deg);
            -ms-transform:rotate(-180deg); /* Internet Explorer */
            -moz-transform:rotate(-180deg); /* Firefox */
            -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg); /* Opera */
            transition: transform 0.2s;
            -moz-transition: transform 0.2s; /* Firefox 4 */
            -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
            -o-transition: transform 0.2s; /* Opera */
        }
    }
}
.nav-wrap{
    position: relative;
    height: 100px;
    line-height: 138px;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    .logo{
        cursor:pointer;
        position: absolute;
        top: 23px;
        left:26px;
        width: 224px;
        height: 54px;
        color: #fff;
        background-size: 100%;
        background-image: url(../../images/logo.png)
    }
    .right-area {
        font-size: 18px;
        line-height: 100px;
        position: absolute;
        right: 26px;
        .r-block {
            float: right;
            span {
                margin-left: -6px;
                &:before {
                    position: relative;
                    right: 6px;
                }
            }
        }
        .nikname {
            color: #666666;
        }
        .logout {
            color: #000000;
            cursor: pointer;
        }
        .separator {
            margin-left: 23px;
            margin-right: 23px;
            color: #D1D1D1;
        }
    }
    .nav-item{
        float: right;
        font-size: 24px;
        color: #666;
        margin-right: 14%;
        .nav-list{
            float: left;
            width:225px;
            text-align: center;
            cursor: pointer;
            span{
                color: #666;
            }
            &.active{
                color: #EE7723;
                span{
                    color: #EE7723;
                    height: 105px;
                    display: inline-block;
                    border-bottom: 2px solid #EE7723;
                }
            }
            &:hover{
                span{
                    color: #EE7723;
                    transition:all .5s linear
                }

            }
        }
    }
}
@media screen and (max-width: 1440px) {
    .nav-wrap {
        height: 85px;
        .logo {
            top: 16px;
        }
        .right-area {
            font-size: 16px;
            line-height: 85px;
        }
    }
}
@media screen and (min-width: 1441px) and (max-width: 1600px) {
}


</style>
